<template>
  <div id="globalHeader">
    <a-row :wrap="false">
      <a-col flex="200px">
        <div class="title-bar">
          <img class="logo" src="../assets/logo.png" alt="logo" />
          <div class="title">下分系统</div>
        </div>
      </a-col>
      <a-col flex="auto">
        <a-menu
          v-model:selectedKeys="current"
          mode="horizontal"
          :items="items"
        />
      </a-col>
      <a-col flex="80px">
        <div class="user-bar">
          <template v-if="loginUser.name">
            <span>{{ loginUser.name }}</span>
          </template>
          <template v-else>
            <a-button type="primary" @click="handleLogin">用户登录</a-button>
          </template>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
import { h, ref } from "vue";
import { HomeOutlined, UserOutlined } from "@ant-design/icons-vue";
import { MenuProps } from "ant-design-vue";
import { zfbLogin } from "@/api/CsrAuthApi";
import { useLoginUserStore } from "@/store/useLoginUserStore";

const current = ref<string[]>(["mail"]);
const loginUserStore = useLoginUserStore();
const loginUser = loginUserStore.loginUser;
const items = ref<MenuProps["items"]>([
  {
    key: "/",
    icon: () => h(HomeOutlined),
    label: "主页",
    title: "主页",
  },
  {
    key: "/user/login",
    icon: () => h(UserOutlined),
    label: "个人中心",
    title: "个人中心",
  },
]);

const handleLogin = async () => {
  const params = {
    status: "1",
    userAccount: "",
  };

  try {
    let resp = await zfbLogin(params);
    console.log("支付宝登录的响应" + resp.data.data.url);
    window.location.href = resp.data.data.url;
  } catch (error) {
    console.error("登录失败:", error);
    // 处理登录失败的情况
  }
};
</script>

<style scoped>
.title-bar {
  display: flex;
  align-items: center;
  color: white;
}

.logo {
  height: 48px;
}

.title {
  color: black;
  font-size: 20px;
  margin-left: 16px;
}
</style>
